<template>
  <div class="root">
    {{ obj.name }}

    <button @click="handleClick">点我一下</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  // 直接写一个setup函数
  setup(){
    // 先不用管reactive是干嘛的，也不用看懂代码，你只需要知道VCA组合式api更贴近于原生js编程，将所有的内容无论是数据还是函数，都写在一起，最后return出去，即可在模板中使用。
    const obj = reactive({
      name:'kerwin',
      myage:100
    });

    const handleClick = function(){
      alert('点什么点，sb')
    }

    // 就像之前data中的return
    return {
      obj,
      handleClick
    }
  }
};
</script>

<style scoped>
</style>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
